<template>
   <div class="erpLoginRate">
        <div class="erp_rate">
            <div class="title">ERP登录率</div>
            <div class="head">
                <div class="head_dealer flex">
                    <div class="img"><svg t="1686210289504" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20067" width="40" height="40"><path d="M878.08 1009.92H145.92c-44.8 0-81.92-34.56-81.92-76.8v-108.8c0-122.88 110.08-221.44 244.48-221.44h407.04c134.4 0 244.48 99.84 244.48 221.44v108.8c0 42.24-37.12 76.8-81.92 76.8zM512 523.52C371.2 523.52 257.28 409.6 257.28 268.8 257.28 128 371.2 14.08 512 14.08 652.8 14.08 766.72 128 766.72 268.8s-115.2 253.44-254.72 254.72z" fill="#3864FC" p-id="20068"></path></svg></div>
                    <div style="flex: 1;">
                        <div class="flex" style="justify-content: space-between;">
                            <div class="color_one">经销商数量:</div>
                            <div>632</div>
                        </div>
                        <div class="flex" style="justify-content: space-between;">
                            <div class="color_one">经销商登录率:</div>
                            <div>80%</div>
                        </div>
                    </div>
                </div>
                <div class="head_operator flex">
                    <div class="img"><svg t="1686210332175" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20606" width="40" height="40"><path d="M378.368 56.32c-48.128 8.704-87.552 36.352-117.76 83.456-30.72 47.616-40.96 80.384-40.96 131.072 0.512 83.968 26.112 146.944 86.016 211.456 35.328 37.888 38.4 42.496 35.84 58.368-4.608 26.624-18.432 41.472-54.784 59.392-195.072 93.696-197.12 94.72-225.792 122.368-26.624 25.6-29.696 31.232-43.008 77.824-13.824 48.128-14.336 50.688-6.144 67.584 9.216 19.968 40.96 41.984 74.24 51.712 77.824 23.552 276.992 35.84 461.824 28.16 146.944-6.144 208.384-15.36 258.048-37.888 37.888-17.408 45.568-32.256 35.84-70.144-8.192-32.256-20.48-72.704-28.672-93.696-8.192-20.992-92.16-74.752-166.4-106.496-99.84-43.008-129.536-60.416-138.24-80.384-10.24-25.088-5.12-39.936 26.112-72.704 69.12-72.192 98.304-160.256 84.992-253.44-10.752-75.264-46.592-128.512-108.544-161.28-26.624-14.336-38.4-17.408-70.656-18.432-20.992-1.024-49.152 0.512-61.952 3.072z" p-id="20607" fill="#FB5D66"></path><path d="M678.912 153.6c-39.936 7.168-38.912 6.144-30.208 34.304 10.752 34.816 14.848 136.704 6.656 171.008-10.24 42.496-32.256 81.92-68.608 121.856-23.04 24.576-33.792 40.448-33.792 49.152 0 19.456 43.008 60.416 74.24 71.68 92.672 31.744 148.992 65.536 193.024 114.688 25.6 28.16 39.936 63.488 47.104 114.688 3.072 19.968 5.632 24.064 12.288 22.016 4.608-1.536 30.72-8.192 57.344-15.36 77.312-19.456 75.264-18.432 79.36-51.712 9.728-75.264-16.384-103.424-157.696-171.52-40.448-19.456-76.288-38.912-79.872-43.008-3.584-4.608-6.656-15.872-7.168-25.088-0.512-14.336 4.608-23.04 25.6-46.592 52.224-58.88 71.68-114.176 66.048-189.44-7.68-112.128-81.92-175.104-184.32-156.672z" p-id="20608" fill="#FB5D66"></path></svg></div>
                    <div style="flex: 1;">
                        <div class="flex" style="justify-content: space-between;">
                            <div class="color_tow">操作员数量:</div>
                            <div>632</div>
                        </div>
                        <div class="flex" style="justify-content: space-between;">
                            <div  class="color_tow">操作员登录率:</div>
                            <div>80%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="erp_connector">
            <div class="title">接口交易量</div>
            <div class="connector_title">
                <el-radio-group 
                    v-model="radio" 
                    size="mini"
                    text-color="#6464f7"
                    class="radio_el_owner"
                >
                    <el-radio-button label="1">按月</el-radio-button>
                    <el-radio-button label="2">按周</el-radio-button>
                    <el-radio-button label="3">按天</el-radio-button>
                </el-radio-group>
            </div>
            <div class="connector_body">
                <div class="transactions">
                    <div><span>〉〉〉</span>接口总交易量</div>
                    <div>26,858,432</div>
                </div>
                <div class="succeed">
                    <div><span>〉〉〉</span>成功数量</div>
                    <div>26,858,432</div>
                </div>
                <div class="fail">
                    <div><span>〉〉〉</span>失败数量</div>
                    <div>0</div>
                </div>
            </div>
        </div>
   </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'

export default {
   name:'salesInformation',
   data() {
        return {
            radio:'1',
        };
   },
   methods:{

   },
   mounted() {

   },
   created(){

   },

}
</script>

<style lang='less'>
.erpLoginRate{
    padding:10px 20px;
    box-sizing: border-box;
    display: flex;
    // align-items: center;
    .title{
      font-weight:900;
      color: black;
      font-size: 18px;
      margin: 10px 0;
   }
   .head_operator,.head_dealer{
       width: 70%;
       border-radius: 4px;
       padding: 16px 20px;
       box-sizing: border-box;
       font-weight: 700;
       font-size: 15px;
       padding-right: 40px;
       .img{
        width: 50px;
       }
   }
    .head_operator{
        background-color: #feeeef;
        .color_tow{
            color: #e28d91;
        }
    }
    .head_dealer{
        background-color: #e8efff;
        margin-bottom: 10px;
        .color_one{
            color: #607bd6;
        }
    }
    .erp_rate{
        width: 50%;
        .head{
            .head_dealer{

            }
        }
    }
    .erp_connector{
        flex: 1;
        .connector_title{
            display: flex;
            justify-content: flex-end;
            .radio_el_owner{
                .el-radio-button{
                    //从这里开始 就是更改颜色的代码，将你的颜色 改掉我的颜色就可以了
                    .el-radio-button__inner{                               
                        margin-bottom: px(5);
                        background-color:#fff;
                        &:hover{
                            border-color: #6464f7;

                        }
                        // &.is-checked {
                        //    .el-radio__inner{
                        //       background-color:#28D4C1;
                        //       border-color:#28D4C1; 
                        //       }
                        // }
                        // .el-radio__inner{
                        //    &:hover{
                        //          border-color:hsl(216, 92%, 51%);
                        //    }
                        // }
                    }
                }
            }
        }
        .connector_body{
            padding: 10px;
            font-weight: 900;
            box-sizing: border-box;
            .transactions,.succeed,.fail{
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                padding: 10px 0;
                font-size: 15px;
                div:nth-child(2){
                    color: #353bcb;
                }
                span{
                    letter-spacing: -12px;
                    margin-right: 10px;
                }
            }
            .succeed{
                border-top:2px dashed #c3c3c3 ;
                border-bottom:2px dashed #c3c3c3 ;
            }
        }
    }
    .flex{
        display: flex;
    }
}
</style>